<template>
  <div>
    <div class="hyb">
      <div class="dp"></div>
      <div class="hyy" v-html="rotatedText"></div>
    </div>
    <!-- 输入框 -->
    <div class="container">
      <div class="form">
        <div class="box1"></div>
        <div class="box2"></div>
        <h1>Welcome</h1>
        <div class="srk">
          <input id="xh" type="text" placeholder="请输入学号" v-model="ruleForm.userid">
          <div class="password-container">
            <input
              id="mm"
              :type="showPassword ? 'text' : 'password'" 
              placeholder="请输入密码"
              v-model="ruleForm.userpassword"
              @blur="hidePassword"
            >
            <!-- <i
              :class="showPassword ? 'fas fa-eye' : 'fas fa-eye-slash'"
              class="toggle-password"
              @click="togglePasswordVisibility"
            ></i> -->
             <!-- 动态切换眼睛图标 -->
          </div>
          <button class="btn-login" @click="submitForm">登录</button>
        </div>
      </div>
    </div>
    <!-- 室训 -->
    <div class="sx">
      <span>勤</span>
      <span>勤</span>
      <span>恳</span>
      <span>恳</span>
      <span>做</span>
      <span>人</span>
      <span>，</span>
      <span>踏</span>
      <span>踏</span>
      <span>实</span>
      <span>实</span>
      <span>做</span>
      <span>事</span>
    </div>
  </div>
</template>


<script>
import axios from 'axios';
export default {
  name: 'LoginTest',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      }
    };
    return {
      originalText: '起点工作室欢迎你★',
      ruleForm: {
        userid: '',
        userpassword: '',
      },
      rules: {
        userid: [{ validator: validatePass, trigger: 'blur' }],
        userpassword: [{ validator: validatePass2, trigger: 'blur' }],
      },
      showPassword: false, // 新增变量控制密码显示状态
      isLoading: true,
    };
  },
  computed: {
    rotatedText() {
      // 根据每个字符生成旋转的HTML
      return this.originalText
        .split('')
        .map((item, i) => {
          return `<span style="transform:rotate(${i * 40}deg)">${item}</span>`;
        })
        .join('');
    },
  },
  methods: {
    hidePassword() {
    // 失去焦点时将 showPassword 设置为 false，隐藏密码
    this.showPassword = false;
  },
    togglePasswordVisibility() {
      // 切换 showPassword 的布尔值
      this.showPassword = !this.showPassword;
    },
    submitForm() {
      axios({
        url: 'api/login/test',
        params: {
          id: this.ruleForm.userid,
          password: this.ruleForm.userpassword,
        },
      })
        .then((response) => {
          if (response.data.data.type === 0) {
            if (response.data.data.token !== null) {
              localStorage.setItem('token', response.data.data.token);
              localStorage.setItem('userid', this.ruleForm.userid);
            }
            this.$router.replace({
              name: 'user',
              params: { userid: this.ruleForm.userid },
            });
          } else if (response.data.data.type === 1) {
            if (response.data.data.token !== null) {
              localStorage.setItem('token', response.data.data.token);
            }
            this.$router.push({ path: '/admin' });
          } else if (response.data.data.type === -1) {
            alert('用户名不存在或密码错误');
          }
        })
        .catch((error) => {
          if (error.response.data === -3) {
            alert('密钥失效，请联系管理员');
          } else if (error.response.data === -4) {
            alert('禁止一台设备登录两个账号');
          } else if (error.response.data === -1) {
            alert('用户名不存在或密码错误');
          } else if (error.response.data === -2) {
            alert('暂不支持此浏览器');
          } else if (error.response.data === -5) {
            alert('请使用第一次使登录的浏览器');
          } else if (error.response.data === -6) {
            alert('请使用电脑访问');
          }
        });
    },
  },
};

</script>

<style>
.password-container {
  position: relative; /* 相对定位容器 */
}

#mm {
  padding-right: 40px; /* 给输入框右侧留空间放图标 */
}

.toggle-password {
  position: absolute;
  right: 10px; /* 图标距离输入框右侧的距离 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中对齐 */
  cursor: pointer;
  color: #5a5353;
}

.toggle-password i {
  font-size: 18px;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

:root {
    --clr: #556fb7;
    --cla: #556fb75b;

}


body {
    height: 100vmin;
    /* display: flex; */
    /* justify-content: flex-start; */
    /* align-items: center; */
    background: linear-gradient(to top, var(--clr), #F1F2B5);
    /* background: linear-gradient(to bottom, hsl(317, 94%, 72%), #6352ff); */
    overflow: hidden;
}

/* ====================拖动效果====================== */
.star {
    /* 关闭宽高，有神奇效果 */
    width: 1px;
    height: 1px;
    position: absolute;
}

.star:before {
    position: absolute;
    content: "\2726";
    inset: 0;
    box-shadow: 0 0 1em 0.1em #40324c;
}

/* ========================背景============================= */
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

body {
    /* font-family: 'Quicksand', sans-serif; */
    /* margin: 0; */
    min-height: 100vmin;
    background-color: #e9b4dc;
    background-image:
        radial-gradient(closest-side, rgb(234, 228, 112), rgba(235, 105, 78, 0)),
        radial-gradient(closest-side, rgb(11, 92, 243), rgba(243, 11, 164, 0)),
        radial-gradient(closest-side, rgb(131, 254, 233), rgba(254, 234, 131, 0)),
        radial-gradient(closest-side, rgb(152, 116, 251), rgba(170, 142, 245, 0)),
        radial-gradient(closest-side, rgb(185, 241, 145), rgba(248, 192, 147, 0));
    /* radial-gradient(closest-side, rgba(235, 105, 78, 1), rgba(235, 105, 78, 0)),
        radial-gradient(closest-side, rgba(243, 11, 164, 1), rgba(243, 11, 164, 0)),
        radial-gradient(closest-side, rgba(254, 234, 131, 1), rgba(254, 234, 131, 0)),
        radial-gradient(closest-side, rgba(170, 142, 245, 1), rgba(170, 142, 245, 0)),
        radial-gradient(closest-side, rgba(248, 192, 147, 1), rgba(248, 192, 147, 0)); */
    background-size:
        130vmax 130vmax,
        80vmax 80vmax,
        90vmax 90vmax,
        110vmax 110vmax,
        90vmax 90vmax;
    background-position:
        -80vmax -80vmax,
        60vmax -30vmax,
        10vmax 10vmax,
        -30vmax -10vmax,
        50vmax 50vmax;
    background-repeat: no-repeat;
    animation: 6s movement linear infinite;
}

body::after {
    content: '';
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* backdrop-filter: blur(10px); */
    /* -webkit-backdrop-filter: blur(10px); */
}

@keyframes movement {

    0%,
    100% {
        background-size:
            130vmax 130vmax,
            80vmax 80vmax,
            90vmax 90vmax,
            110vmax 110vmax,
            90vmax 90vmax;
        background-position:
            -80vmax -80vmax,
            60vmax -30vmax,
            10vmax 10vmax,
            -30vmax -10vmax,
            50vmax 50vmax;
    }

    25% {
        background-size:
            100vmax 100vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            60vmax 60vmax;
        background-position:
            -60vmax -90vmax,
            50vmax -40vmax,
            0vmax -20vmax,
            -40vmax -20vmax,
            40vmax 60vmax;
    }

    50% {
        background-size:
            80vmax 80vmax,
            110vmax 110vmax,
            80vmax 80vmax,
            60vmax 60vmax,
            80vmax 80vmax;
        background-position:
            -50vmax -70vmax,
            40vmax -30vmax,
            10vmax 0vmax,
            20vmax 10vmax,
            30vmax 70vmax;
    }

    75% {
        background-size:
            90vmax 90vmax,
            90vmax 90vmax,
            100vmax 100vmax,
            90vmax 90vmax,
            70vmax 70vmax;
        background-position:
            -50vmax -40vmax,
            50vmax -30vmax,
            20vmax 0vmax,
            -10vmax 10vmax,
            40vmax 60vmax;
    }
}

/* =======================起点图标========================== */
.hyb {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20vmin;
    height: 20vmin;
    /* background-color: #ccc; */
    border-radius: 50%;
    position: relative;
    margin-left: 2vw;
    margin-top: 2vh;
}

.hyb .dp {
    width: 70%;
    height: 70%;
    background: url(/public/img/deng.png) no-repeat;
    background-size: 90% 110%;
    margin-left: 5%;
    position: absolute;
}

.hyb .hyy {
    width: 100%;
    height: 100%;
    font-family: '黑体';
    position: absolute;
    animation: hhb 20s linear infinite;
    color: #fff;
    /* background: linear-gradient(to right, #F7951E, #F8EE39, #AAC6E5, #7C94CD);
    color: transparent;
    background-clip: text; */

}

@keyframes hhb {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.hyb .hyy span {
    font-size: 2vmin;
    transform-origin: 0 10vmin;
    position: absolute;
    left: 50%;
}

/* ====================输入框===================== */
.container {
    text-align: center;
    /* color: #fff; */
    font-family: 'Microsoft JhengHei Light';
    margin-top: -1vmin;
    z-index: 9999;
}

.box1,
.box2 {
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    width: 70vmin;
    height: 60vmin;
    /* float: left; */
    border-radius: 52% 48% 55% 45% / 47% 52% 48% 53%;
    backdrop-filter: blur(9px) brightness(111%);
    background-color: rgba(227, 226, 226, 0.231);
    position: absolute;
    /* top: 2%;
    left: 25vmin; */
    transform: (-50vmin, -50vmin);
    z-index: -1;
    animation: boxsxz 10s linear infinite;
}

.box2 {
    background-color: rgba(245, 245, 245, 0.365);
    border-radius: 47% 52% 48% 53%/ 52% 48% 55% 45%;
    animation: boxsxz2 11s linear infinite;
    transform: rotate(90deg);
}


@keyframes boxsxz {
    0% {

        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes boxsxz2 {
    0% {

        transform: rotate(60deg);
    }

    100% {
        transform: rotate(420deg);
    }
}

.container h1 {
    font-size: 6vmin;
    letter-spacing: 0.5vmin;
    margin-top: 12vmin;
    margin-bottom: 3vmin;
    animation: Welcome 3s;
    transition: 1s ease-in-out;
    font-weight: 500;
    color: #eb45b3;
    color: var(--clr);
    z-index: 9999;
    /* animation-timing-function: ; */
}

@keyframes Welcome {
    0% {
        opacity: 0;
        transform: translateY(-50px);
        z-index: 9999;
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        z-index: 9999;
    }
}



.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    /* opacity: 1; */
    transition: 0.5s;
    z-index: 9999;


}

.form input {
    outline: none;
    border: 0.1vmin solid rgba(255, 255, 255, 0.4);
    /* border: 0.2vmin solid var(--cla); */
    background: rgba(255, 255, 255, 0.633);
    /* background: #fcdbf131; */
    /* opacity: 0.2; */
    width: 250px;
    width: 36vmin;
    height: 6vmin;
    padding: 1vmin 1.5vmin;
    border-radius: 0.3vmin;
    margin: 0 auto 1.4vmin auto;
    text-align: center;
    color: #eb45b3;
    color: var(--clr);
    font-size: 15px;
    font-size: 1.8vmin;
    transition: 0.25s;
}

.form input::placeholder {
    color: #eb45b3;
    color: var(--clr);
    font-size: 1.8vmin;
    font-weight: 300;

}

.form input:hover {
    background: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.73);
    background: #fff;
}

.form input:focus {
    background: #fff;
    width: 45vmin;
    color: #eb45b3;
    color: var(--clr);
    font-size: 1.8vmin;
}



.btn-login {
    outline: none;
    background: #fff;
    color: #eb45b3;
    color: var(--clr);
    border: none;
    width: 250px;
    width: 36vmin;
    height: 6vmin;
    line-height: 1vmin;
    padding: 1vmin 1.5vmin;
    border-radius: 0.3vmin;
    font-size: 15px;
    font-size: 1.8vmin;
    cursor: pointer;
    transition: 0.25s;
}

.btn-login:hover {
    background: var(--clr);
    color: #3a5755;
    color: #fff;
}


.container.success h1 {
    transition: 1s ease-in-out;
    animation: successWelcome 1s linear forwards;
    z-index: 9999;

}

@keyframes successWelcome {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(12vmin);
    }
}

.srk {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container.success .srk {
    opacity: 0;
    visibility: hidden;
}

.yj {
    display: none;
    float: left;
    z-index: 2;
    position: absolute;
    top: 47px;
    left: 59vw;
    transition: 0.5s;
}


/* ====================室训===================== */
.sx {
    position: relative;
    width: 100vw;
    height: 7vmin;
    bottom: -27vmin;
    /* border: 1px solid red; */
}

.sx span {
    position: absolute;
    width: 3vmin;
    height: 6vmin;
    line-height: 6vmin;
    margin: 0 1vmin;
    color: #fff;
    text-align: center;
    font-size: 3vmin;
    transform: rotate(180deg);
    opacity: 0;
    animation: wzxz 4s linear infinite;
    font-weight: 900;
}

.sx span:nth-child(2) {
    animation-delay: 0.15s;
}

.sx span:nth-child(3) {
    animation-delay: 0.3s;
}

.sx span:nth-child(4) {
    animation-delay: 0.45s;
}

.sx span:nth-child(5) {
    animation-delay: 0.6s;
}

.sx span:nth-child(6) {
    animation-delay: 0.75s;
}

.sx span:nth-child(7) {
    animation-delay: 0.9s;
}

.sx span:nth-child(8) {
    animation-delay: 1.05s;
}

.sx span:nth-child(9) {
    animation-delay: 1.3s;
}

.sx span:nth-child(10) {
    animation-delay: 1.45s;
}

.sx span:nth-child(11) {
    animation-delay: 1.6s;
}

.sx span:nth-child(12) {
    animation-delay: 1.75s;
}

.sx span:nth-child(13) {
    animation-delay: 1.9s;
}



@keyframes wzxz {
    0% {
        right: 0;
        opacity: 0;
    }

    35% {
        right: 41%;
        transform: rotate(0deg);
        opacity: 1;
    }

    65% {
        right: 59%;
        transform: rotate(0deg);
        opacity: 1;
    }

    100% {
        right: 100%;
        transform: rotateZ(-180deg);
        opacity: 0;
    }
}
</style>